<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-form-container">
        <p>欢迎来到能源系统平台</p>
        <form class="login-form">
          <div class="form-group">
            <p class="loginName">登录名称:</p>
            <input type="text" id="username" v-model="username" placeholder="请输入用户名">
          </div>
          <div class="form-group form-input">
            <p class="loginName">密码:</p>
            <input type="password" id="password" v-model="password" placeholder="请输入密码">
          </div>
          <div class="form-input">
            <button type="button" @click="login">登录</button>
          </div>

        </form>
      </div>
    </div>
<!--    <div class="login-box">
      <div class="login-form-container">
        <p>能源系统平台</p>
        <form class="login-form">
          <div class="form-group">
            <input type="text" id="username" v-model="username" placeholder="请输入用户名">
          </div>
          <div class="form-group form-input">
            <input type="password" id="password" v-model="password" placeholder="请输入密码">
          </div>
          <div class="form-input">
            <button type="button" @click="login">登录</button>
          </div>

        </form>
      </div>
    </div>-->
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'LoginPage',
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      let compponents = this; //声明一个变量赋值为this，以便在axios.post方法的作用域中使用。
      // 在这里处理登录逻辑
      axios.defaults.baseURL = "/api";
      let username = this.username;
      let password = this.password;
      let response = await this.$asyncPost('signIn', { loginName: username, pwd: password });
      if (response.success) {
        let { userInfo } = response; //{userInfo} = result 的语法形式 等同于 let userInfo=result.userInfo
        let { token } = response;
        compponents.$store.dispatch("user/setToken", token); //通过调用Stroe中的user modules 声明的 setToken 将token 在vuex中定义 以便后期随时调用
        compponents.$store.dispatch("user/setUserInfo", userInfo); //通过调用Stroe中的user modules 声明的 setUserInfo 将t用户信息 在vuex中定义 以便后期随时调用
        compponents.$router.push("/");
        compponents.$message.success('登录成功');
      } else {
        compponents.$message.warning(response.message);
      }

    }
  }
};
</script>

<style scoped lang="scss">
.login-container {
  background-image: url(../assets/loginBackground.png);
  background-size: 100%;
  background-repeat: no-repeat;
  min-height: calc(100vh);
  .login-box{
    width: 650px;
    min-height: calc(100vh);
    background: rgba(255, 255, 255, 0.9);
    float: right;
    border-radius: 3px;
    .login-form-container{
      width: 500px;
      padding: 40px 10px;
      margin: 0 auto;
      margin-top: 120px;
      p{
        font-size: 38px;
        color: #545454;
        font-weight: bold;
        letter-spacing: 2px;
        text-align: center;
      }
      .login-form{
        margin-top: 80px;
      }
      .loginName{
        font-size: 17px;
        text-align: start;
        margin-bottom: 10px;
        font-weight: 600  ;
      }
    }
  }
}
/*.login-box {
  position: fixed;
  min-height: 100vh;
  text-align: center;
  background-image: url(../assets/logincenterBackground.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 1480px;
  height: 850px;
  margin-left: 114px;
  margin-top: 50px;
  .login-form-container{
    width: 500px;
    padding: 40px 80px;
    margin-left: 920px;
    margin-top: 175px;
    p{
      font-size: 34px;
      color: #c4316d;
      !*color: #4d657b;*!
      letter-spacing: 2px;
    }
    .login-form{
      margin-top: 80px;
    }
  }
}*/
.login-title {
  text-align: center;
  margin-bottom: 20px;
}
.form-input{
  margin-top: 35px;
}
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  padding: 0px 30px;
  color: #2f2f2f;
  height: 60px;
  background: #ffffff00;
}

button {
  width: 100%;
  padding: 12px;
  /*background: linear-gradient( #2edcdb,#2080ff);*/
  background: #886fe2;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  letter-spacing: 3px;
  height: 60px;
  margin-top: 20px;
  &:focus {
    border-color: #5486c7;
    outline: none;
    -webkit-box-shadow: inset 0 1px 1px #d0d0d0, 0 0 8px #dddaff;
    box-shadow: inset 0 1px 1px #d0d0d0, 0 0 8px #d0d0d0;
  }
}

button:hover {
  background-color: #9861e2;
}
</style>
